<template>
	<view class="follow-view">
		<van-tabs
			title-active-color="#3e9df8"
			line-width="80px"
			color="#3e9df8"
			title-inactive-color="#7d7e80"
			swipeable
			:ellipsis="false"
			:lock-scroll="true"
			:active="state.active"
		>
			<van-tab title="关注" name="关注">
				<view class="content">
					<view class="collect-list">
						<view
							class="item"
							v-for="(item, i) in followList"
							:key="i"
						>
							<view class="left">
								<image :src="item.photo" mode=""></image>
								<view class="info">
									<text>{{ item.userName }}</text>
									<text>粉丝数：{{ item.fans }}</text>
								</view>
							</view>
							<view class="right">
								<van-button
									@click="fens(item.id)"
									:type="
										item.gz === '已关注'
											? 'default'
											: 'danger'
									"
									>{{ item.gz }}</van-button
								>
							</view>
						</view>
						<view class="finished-text">没有更多了</view>
					</view>
				</view>
			</van-tab>
			<van-tab title="粉丝" name="粉丝">
				<view class="content">
					<view class="collect-list">
						<view
							class="item"
							v-for="(item, i) in fansList"
							:key="i"
						>
							<view class="left">
								<image :src="item.photo" mode=""></image>
								<view class="info">
									<text>{{ item.userName }}</text>
									<text>粉丝数：{{ item.fans }}</text>
								</view>
							</view>
							<view class="right">
								<van-button
									@click="follow(item.id)"
									:type="
										item.gz === '已关注'
											? 'default'
											: 'danger'
									"
									>{{ item.gz }}</van-button
								>
							</view>
						</view>
						<view class="finished-text">没有更多了</view>
					</view>
				</view>
			</van-tab>
		</van-tabs>
	</view>
</template>

<script setup>
// vue3小程序生命周期函数
import { onShareAppMessage, onLoad, onShow, onHide } from '@dcloudio/uni-app'
import { reactive, toRefs } from 'vue'
import { fansApi, getfollowApi, followApi } from '../../api/modules/user'
const state = reactive({ active: '粉丝', followList: [], fansList: [] })

const getFollow = async () => {
	const { data } = await getfollowApi()
	state.followList = data
}
const getFans = async () => {
	const { data } = await fansApi()
	state.fansList = data
}

const fens = async lid => {
	await followApi({ lid })
	getFollow()
}

const follow = async lid => {
	await followApi({ lid })
	getFans()
}

// 页面加载
onLoad(message => {
	state.active = message.active
	getFollow()
	getFans()
})

// 页面显示
onShow(() => {})

// 页面隐藏
onHide(() => {})

// 页面分享(不定义该函数 页面将无法分享)
onShareAppMessage(() => {})
const { followList, fansList } = toRefs(state)
</script>

<style lang="scss">
.follow-view {
	.content {
		background-color: #f5f7f9;
		min-height: calc(100vh - 88rpx);
		padding: 20rpx 0;
		.collect-list {
			.item {
				margin: 40rpx 0;
				padding: 0 40rpx;
				display: flex;
				justify-content: space-between;
				flex-direction: row;
				&:first-child {
					margin-top: 0;
				}
				.left {
					display: flex;
					flex-direction: row;
					image {
						width: 50px;
						height: 50px;
						border-radius: 25px;
					}
					.info {
						display: flex;
						justify-content: space-around;
						flex-direction: column;
						align-items: baseline;
						margin-left: 20rpx;
					}
				}
				.right {
					padding: 0 30rpx;
					font-size: 28px;
				}
			}
		}
		.finished-text {
			color: #969799;
			font-size: 26rpx;
			line-height: 100rpx;
			text-align: center;
		}
	}
}
</style>
